﻿function Calendar(textbox,showTime)
{
    this._frameName = "frameCalendar";
    this._showTime = (showTime == null) ? false : showTime;
    this._srcButton = null; //点击的按钮
    this._iframe = window.frames[this._frameName];
    this._textbox = textbox;     
    this._top = null;
    this._left = null;

    var now = new Date();
    this._year = now.getFullYear();
    this._month = now.getMonth();
    this._date = now.getDate();
    this._hour = now.getHours();
    this._minute = now.getMinutes();

    //初始化日期时间
    if (this._textbox.value != "")
    {
        var reg = /^(\d+)-(\d{1,2})-(\d{1,2})/; 	//不含时间
        if (this._showTime)
        {
            reg = /^(\d+)-(\d{1,2})-(\d{1,2})\s(\d{1,2}):(\d{1,2})/;
        }
        var arr = this._textbox.value.match(reg);
        if (arr != null)
        {
            this._year = parseInt(arr[1]);
            this._month = parseInt(arr[2]) - 1;
            this._date = parseInt(arr[3]);

            if (this._showTime)
            {
                this._hour = arr[4];
                this._minute = arr[5];
            }
        }
    }

//    this._textbox.onblur = function()
//    {
//        window.setTimeout(function() { document.getElementById("frameCalendar").style.display = "none"; }, 100);
//    }
}
Calendar.prototype.getAbsPoint = function(e)
{
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while (e = e.offsetParent)
    {
        x += e.offsetLeft;
        y += e.offsetTop;
    }
    return { "x": x, "y": y };
};

Calendar.prototype.getElementById = function(id)
{
    return this._iframe.document.getElementById(id);
};

Calendar.prototype.getElementsByTagName = function(tagName)
{
    return this._iframe.document.getElementsByTagName(tagName);
};

Calendar.prototype.parseDate = function(datestr)
{
    var reg = /^(\d+)-(\d{1,2})-(\d{1,2})/;
    var arr = datestr.match(reg);
    if (arr != null)
    {
        return new Date(arr[1], parseInt(arr[2])-1, arr[3]);
    }
    else
    {
        return new Date();
    }
}

Calendar.prototype.isIE6 = (navigator.userAgent.indexOf("MSIE 6.0") > -1);

Calendar.prototype.setTextBox = function()
{
    this._textbox.value = this._year + "-" + (this._month + 1) + "-" + this._date;
    if (this._showTime)
    {
        this._textbox.value += " " + this._hour + ":" + this._minute + ":0";
    }
};
Calendar.prototype.clearSelect = function(select)
{
    while (select.options.length > 0)
    {
        if (select.remove)
        {
            select.remove(0);
        }
        else
        {
            select.options.remove(0);
        }
    }
};

//绑定年份
Calendar.prototype.bindYear = function()
{
    var selYear = this.getElementById("selYear");
    this.clearSelect(selYear);
    for (var i = this._year - 10; i < this._year + 10; i++)
    {
        var opt = new Option(i, i);
        if (i == this._year)
        {
            opt.selected = true;
        }
        selYear.options.add(opt);
    }

    var cal = this;
    selYear.onchange = function()
    {
        cal._year = parseInt(selYear.value);
        cal.fillDate();
        cal.setTextBox();
        if (this.isIE6)
        {
            cal.getElementById("spanYear").style.display = "none";
        }
    }

};

//绑定12个月
Calendar.prototype.bindMonth = function()
{
    var selMonth = this.getElementById("selMonth");
    this.clearSelect(selMonth);
    for (var i = 1; i < 13; i++)
    {
        var opt = new Option(i, i);
        if (i == (this._month + 1))
        {
            opt.selected = true;
        }
        selMonth.options.add(opt);
    }
    var cal = this;
    selMonth.onchange = function()
    {
        cal._month = parseInt(selMonth.value) - 1;
        cal.fillDate();
        cal.setTextBox();
        if (this.isIE6)
        {
            cal.getElementById("spanMonth").style.display = "none";
        }
    }
};

Calendar.prototype.bindHour = function()
{
    var selHour = this.getElementById("selHour");
    this.clearSelect(selHour);
    for (var i = 0; i < 24; i++)
    {
        var opt = new Option(i, i);
        if (i == this._hour)
        {
            opt.selected = true;
        }
        selHour.options.add(opt);
    }
    var cal = this;
    selHour.onchange = function()
    {
        cal._hour = parseInt(selHour.value);
        cal.fillDate();
        cal.setTextBox();
        if (this.isIE6)
        {
            cal.getElementById("spanHour").style.display = "none";
        }
    }
};

Calendar.prototype.bindMinute = function ()
{
    var selMinute = this.getElementById("selMinute");
    this.clearSelect(selMinute);

    //selMinute.options.add(new Option('', ''));

    for (var i = 0; i < 60; i += 5)
    {
        var opt = new Option(i, i);
        if (Math.abs(i - this._minute) < 3)
        {
            opt.selected = true;
        }
        selMinute.options.add(opt);
    }
    var cal = this;
    selMinute.onchange = function ()
    {
        cal._minute = parseInt(selMinute.value);
        cal.fillDate();
        cal.setTextBox();
        if (this.isIE6)
        {
            cal.getElementById("spanMinute").style.display = "none";
        }
    }
};



Calendar.prototype.fillDate = function()
{
    //年、月、时、分部分
    this.bindYear();
    this.bindMonth();
    this.bindHour();
    this.bindMinute();
    var cal = this;
    if (this.isIE6)
    {
        var tdTimes = ["tdYear", "tdMonth", "tdHour", "tdMinute"];
        var spanTimes = ["spanYear", "spanMonth", "spanHour", "spanMinute"];
        for (var i = 0; i < 4; i++)
        {
            this.getElementById(spanTimes[i]).style.display = "none";
            this.getElementById(tdTimes[i]).onclick = function()
            {
                alert(cal);
                cal.getElementById(spanTimes[i]).style.display = "";
            };
        }
        this.getElementById(tdTimes[0]).onclick = function() { cal.getElementById("spanYear").style.display = ""; };
        this.getElementById(tdTimes[1]).onclick = function() { cal.getElementById("spanMonth").style.display = ""; };
        this.getElementById(tdTimes[2]).onclick = function() { cal.getElementById("spanHour").style.display = ""; };
        this.getElementById(tdTimes[3]).onclick = function() { cal.getElementById("spanMinute").style.display = ""; };
    }

    this.getElementById("tdYear").innerHTML = this._year + "年";
    this.getElementById("tdMonth").innerHTML = (this._month + 1) + "月";
    this.getElementById("tdHour").innerHTML = this._hour;
    this.getElementById("tdMinute").innerHTML = this._minute;

    if (this._showTime)
    {
        this.getElementById("tblTime").style.display = "";
    }
    else
    {
        this.getElementById("tblTime").style.display = "none";
        this.getElementById("spanHour").style.display = "none";
        this.getElementById("spanMinute").style.display = "none";
    }

    //日期部分
    var dateArray = this.getDateArray();
    var today = new Date();
    var controlDate = this.parseDate(this._textbox.value);
    for (var i = 0; i < 37; i++)
    {
        var td = this.getElementById("tdDate" + i);
        td.style.textAlign = "center";
        td.style.cursor = "pointer";
        td.style.backgroundColor = "";
        if (this._year == today.getFullYear() && this._month == today.getMonth() && dateArray[i] == today.getDate())//今天用红色表示
        {
            td.style.color = "#ff0000";
        }
        else
        {
            td.style.color = "#0000ff";
        }

        if (this._textbox.value != "" && dateArray[i])//当前选中日期用灰色背景显示
        {
            if (controlDate.getFullYear() == this._year && controlDate.getMonth() == this._month && controlDate.getDate() == dateArray[i])
            {
                td.style.backgroundColor = "#dddddd";
            }
        }
        td.title = (this._month + 1) + "月" + dateArray[i] + "日"

        td.innerHTML = dateArray[i] || "&nbsp;";

        if (dateArray[i])
        {
            this.setTdEvent(td, dateArray[i]);
        }
    }
};

//设置选择日期的事件
Calendar.prototype.setTdEvent = function(td, date)
{
    var cal = this;
    td.onclick = function()
    {
        cal._date = date;
        cal.setTextBox();
        cal.hide();
    }
};


Calendar.prototype.getDateArray = function()
{
    var dateArray = new Array(42);
    var dayOfFirstDate = new Date(this._year, this._month, 1).getDay();
    var dateCountOfMonth = new Date(this._year, this._month + 1, 0).getDate();
    for (var i = 0; i < dateCountOfMonth; i++)
    {
        dateArray[i + dayOfFirstDate] = i + 1;
    }
    return dateArray;
};

Calendar.prototype.goPreMonth = function()
{
    this._month--;
    if (this._month == -1)
    {
        this._year--;
        this._month = 11;
    }
    this.fillDate();   
};

Calendar.prototype.goNextMonth = function()
{
    this._month++;
    if (this._month == 12)
    {
        this._year++;
        this._month = 0;
    }
    this.fillDate();  
};



Calendar.prototype.show = function()
{
    var bMoveable = false;
    var html = [];
    html[html.length] = '<div style="z-index:9999;position: absolute; left:0; top:0;" onselectstart="return false">';
    html[html.length] = '<span id="spanYear"  style="z-index: 9999;position: absolute;top:1px; left:22px;"><select id="selYear" style="width:52px;font-size:12px;filter:alpha(opacity=0); opacity:0.00;-moz-opacity: 0.00"></select></span>';
    html[html.length] = '<span id="spanMonth"  style="z-index: 9999;position: absolute;top:0px; left:80px;"><select id="selMonth" style="width:40px;font-size:12px;filter:alpha(opacity=0); opacity:0.00;-moz-opacity: 0.00"></select></span>';
    html[html.length] = '<span id="spanHour"  style="z-index: 9999;position: absolute;top:140px; left:60px;"><select id="selHour" style="width:30px;font-size:12px;filter:alpha(opacity=0); opacity:0.00;-moz-opacity: 0.00"></select></span>';
    html[html.length] = '<span id="spanMinute" style="z-index:9999;position:absolute;top:140px; left:95px;"><select id="selMinute" style="width:30px;font-size:12px;filter:alpha(opacity=0); opacity:0.00;-moz-opacity: 0.00"></select></span>';
    html[html.length] = '<table  cellspacing="0" cellpadding="0" style="width:140px;height:160px;border: #336699 1px solid;background-color:#F7F7F7; ">';
    html[html.length] = '    <tr>';
    html[html.length] = '       <td style="width:140px;height:20px;background-color:#ffffff;">';
    html[html.length] = '           <table border="0" cellspacing="1" cellpadding="0" style="width:140px;height:20px;">';
    html[html.length] = '               <tr>';
    html[html.length] = '                   <td id="tdPre" style="text-align:center;width:16px;background-color:#999999;font-size:12px;cursor:pointer;color: #ffffff;" title="向前翻 1 月" >&lt;</td>';
    html[html.length] = '                   <td id="tdYear"  style="text-align:center;width:60px;background-color:#999999;font-size:12px;cursor:pointer;color: #ffffff;" onclick="parent.tmpSelectYearInnerHTML(document.getElementById(\'meizzYearHead\').innerHTML.substring(0,4))" title="点击这里选择年份"></td>';
    html[html.length] = '                   <td id="tdMonth" style="text-align:center;width:48px;background-color:#999999;font-size:12px;cursor:pointer;color: #ffffff;" onclick="parent.tmpSelectMonthInnerHTML(document.getElementById(\'meizzMonthHead\').innerHTML.substring(0,2))" title="点击这里选择月份"></td>';
    html[html.length] = '                   <td id="tdNext" style="text-align:center;width:16px;background-color:#999999;font-size:12px;cursor:pointer;color: #ffffff" title="向后翻 1 月" >&gt;</td>';
    html[html.length] = '               </tr>';
    html[html.length] = '           </table>';
    html[html.length] = '       </td>';
    html[html.length] = '   </tr>';
    html[html.length] = '   <tr>';
    html[html.length] = '       <td style="width:140px;height:18px;">';
    html[html.length] = '           <table border="0" cellspacing="0" cellpadding="0" ' + (bMoveable ? 'onmousedown="DragStart()" onmouseup="DragEnd()"' : '') + ' style="background-color:#f5f5f5;width:140px;height:20px;cursor:' + (bMoveable ? 'move' : 'default') + '">';
    html[html.length] = '               <tr>';
    html[html.length] = '                   <td style="font-size:12px;color:#FF0000;width:20px;">&nbsp;日</td>';
    html[html.length] = '                   <td style="font-size:12px;color:#008000" >&nbsp;一</td>';
    html[html.length] = '                   <td style="font-size:12px;color:#008000">&nbsp;二</td>';
    html[html.length] = '                   <td style="font-size:12px;color:#008000" >&nbsp;三</td>';
    html[html.length] = '                   <td style="font-size:12px;color:#008000" >&nbsp;四</td>';
    html[html.length] = '                   <td style="font-size:12px;color:#008000" >&nbsp;五</td>';
    html[html.length] = '                   <td style="font-size:12px;color:#008000" >&nbsp;六</td>';
    html[html.length] = '               </tr>';
    html[html.length] = '           </table>';
    html[html.length] = '       </td>';
    html[html.length] = '   </tr>';
    html[html.length] = '   <tr >';
    html[html.length] = '       <td style="width:140px;height:120px;">';
    html[html.length] = '           <table id="tblDates" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff;width:140px;height:120px;">';
    var n = 0;
    for (var i = 0; i < 5; i++)
    {
        html[html.length] = '           <tr>';
        for (var j = 0; j < 7; j++)
        {
            html[html.length] = '           <td id="tdDate' + n + '" style="font-size:12px;width:20px;height:20px;background-color:#ffffff" ></td>';
            n++;
        }
        html[html.length] = '           </tr>';
    }
    html[html.length] = '               <tr>';
    for (i = 35; i < 37; i++)
    {
        html[html.length] = '               <td id="tdDate' + i + '" style="font-size:12px;width:20px;height:20px;"">&nbsp;</td>';
    }

    html[html.length] = '                   <td colspan="5" style="color:#1478eb;padding-left:20px;">';
    html[html.length] = '                       <table  cellspacing="1" cellpadding="0" id="tblTime" border="0" style="vertical-align:middle">';
    html[html.length] = '                           <tr>';
    html[html.length] = '                               <td style="cursor:pointer;text-align:center;width:20px;vertical-align:middle;color:#0000ff" id="tdHour" onclick="parent.tmpSelectHourInnerHTML(document.getElementById(\'meizzHourHead\').innerHTML.substring(0,2))" title="点击这里选择时间" ></td>';
    html[html.length] = '                               <td style="color:#bcbabc;vertical-align:middle;">时</td>';
    html[html.length] = '                               <td style="cursor:pointer;text-align:center;width:20px;vertical-align:middle;color:#0000ff" id="tdMinute" onclick="parent.tmpSelectMinuteInnerHTML(document.getElementById(\'meizzMinuteHead\').innerHTML.substring(0,2))" title="点击这里选择时间"></td>';
    html[html.length] = '                               <td style="vertical-align:middle;color:#bcbabc">分</td>';
    html[html.length] = '                           </tr>';
    html[html.length] = '                       </table>';
    html[html.length] = '                   </td>';
    html[html.length] = '               </tr>';
    html[html.length] = '           </table>';
    html[html.length] = '       </td>';
    html[html.length] = '   </tr>';
    html[html.length] = '   <tr>';
    html[html.length] = '       <td height="20" style="text-align:center;background-color:#FFFFFF">';
    html[html.length] = '           <table  border="0" cellspacing="1" cellpadding="0" style="width:140px;height:20px;">';
    html[html.length] = '               <tr>';
    html[html.length] = '                   <td style="background-color:#999999;text-align:center;"><span id="spanClear" style="color:#ffffff;font-size:12px;cursor: pointer" title="将日期清空">清空</span></td>';
    html[html.length] = '                   <td style="background-color:#999999;text-align:center;"><span id="spanCurr"  style="color:#ffffff;font-size:12px;cursor: pointer" title="当前日期时间">当前</span></td>';
    html[html.length] = '                   <td style="background-color:#999999;text-align:center;"><span id="spanClose" style="color:#ffffff;font-size:12px;cursor: pointer" title="关闭日历">关闭</span></td>';
    html[html.length] = '               </tr>';
    html[html.length] = '           </table>';
    html[html.length] = '       </td>';
    html[html.length] = '   </tr>';
    html[html.length] = '</table>';
    html[html.length] = '</div>';

    this._iframe.document.body.innerHTML = html.join("");
    var frame = document.getElementById(this._frameName);
    var xy = this.getAbsPoint(this._textbox);
    with (frame.style)
    {
        left = xy.x + "px";
        top = (xy.y + this._textbox.offsetHeight) + "px";
        display = "";
    }   
    this.fillDate();

    var cal = this;
    this.getElementById("tdPre").onclick = function()
    {
        cal.goPreMonth();
    }

    this.getElementById("tdNext").onclick = function()
    {
        cal.goNextMonth();
    }

    this.getElementById("spanClose").onclick = this.hide;
    this.getElementById("spanClear").onclick = function()
    {
        cal._textbox.value = "";
        cal.hide();
    }
    this.getElementById("spanCurr").onclick = function()
    {
        var today = new Date();
        cal._year = today.getFullYear();
        cal._month = today.getMonth();
        cal._date = today.getDate();
        cal._hour = today.getHours();
        cal._minute = today.getMinutes();

        cal.setTextBox();
        cal.hide();
    }

};



Calendar.prototype.hide = function()
{
    document.getElementById("frameCalendar").style.display = "none";
};

document.writeln('<iframe id="frameCalendar" name="frameCalendar" frameborder="0"  scrolling="no" style="width:142px;height:185px;top:0px;left:200px;position:absolute; z-index: 9998; display: none"></iframe>');

var html = [];
html[html.length] = '<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">';
html[html.length] = '<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">';
html[html.length] = '<head>';
html[html.length] = '<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>';
html[html.length] = '<title>Web Calendar(UTF-8) Written By Jiangzy<\/title>';
html[html.length] = '<style type="text\/css">';
html[html.length] = '<!--';
html[html.length] = '   input.button{border-right: #63a3e9 1px solid;border-top: #63a3e9 1px solid;border-left: #63a3e9 1px solid;';
html[html.length] = '   border-bottom: #63a3e9 1px solid;font-family:宋体;}';
html[html.length] = '   td{font-size: 9pt;font-family:宋体;}';
html[html.length] = '-->';
html[html.length] = '<\/style>';
html[html.length] = '<\/head>';
html[html.length] = '<body>';
html[html.length] = '<\/body>';
html[html.length] = '<\/html>';

window.frames['frameCalendar'].document.writeln(html.join(""));
window.frames['frameCalendar'].document.close();

function setday(textbox, showTime)
{
    (new Calendar(textbox,showTime)).show();
}
